<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>apobates jQuery menu plug</title>
<style type="text/css">
/*测试页面布局*/
*{margin:0;padding:0;}
header{height:30px;background-color:#ddd;}
        #account{float:right;padding-right:2em;width:200px;line-height:30px;}
                #account a{display:inline-block;padding:0 10px}
                #account p{width:200px;line-height:30px;cursor:pointer}
/*pop*/
.segement{display:none;}
#confirm_layer{width:100%;margin:0 auto;background-color:rgba(0,0,0,0.5);height:100px;line-height:100px;text-align:center;}
    #confirm_layer label{color:#fff}
    #confirm_layer button{border:1px solid #666;padding:8px 33px;margin-right:10px;background-color:#333;color:#999;font-weight:700;font-size:120%}
    .focus{background-color:green!important;color:#fff!important;border-style:none!important;}
</style>
</head>

<body>
<header>
    <!-- //结构关系不存在-->
    <a id="logo_anchor" href="/">apobates</a>
    <div id="account">
        <a href="javascript:;">xiaofanku</a>
        <a id="logout_btn" href="javascript:;">退出</a>
    </div>
</header>
<!-- //菜单片段-->
<div id="confirm_layer" class="segement">
        <label>确认要退出当前状态吗?</label>
        <button>取消</button><button class="focus">是的</button>
        
</div>
<script type="text/javascript" charset="UTF-8" src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="jquery.apoMenu.js"></script>
<script type="text/javascript">
//原来的格式不再采用
//$.apoMenu.pop('#logout_btn',{menu:'#confirm_layer',direct:'btt'});
</script>
</body>
</html>
